<template>
	<div>
		<div class="nav-title flex align-center">
			<p>申请配置信息</p>
			<div class="primary-btn" v-if="!isDetail" @click="handleOpenSelect">选择</div>
		</div>
		<div class="nav-title flex align-center">
			<div class="primary-tag fc">{{ model.subsidyTypeLabel }}</div>
		</div>
		<p class="flex align-center gap-10">
			<span>申请周期：{{ cycleStr[nowData.applyCycle] }}</span>
			<span>申请日期：{{ nowData.cycleDate }}日</span>
		</p>
		<div class="nav-tag-list">
			<div
				class="nav-tag-item"
				:class="{ active: item.value == activeTag }"
				v-for="(item, index) in navTagList"
				:key="index"
				@click="handleClick(item)"
			>
				<span class="text">{{ item.label }}</span>
			</div>
		</div>
		<div class="config-content" v-if="!loading">
			<policyArchive v-if="activeTag == 1" :list="nowData.policyRel" :key="nowData.id"></policyArchive>
			<ApplyReport v-else-if="activeTag == 2" :isDetail="isDetail" :list="nowData.tableRel"></ApplyReport>
			<MaterialForm v-else-if="activeTag == 3" :type="1" :list="nowData.materialRel"></MaterialForm>
			<ApplyReport v-else-if="activeTag == 4" :isDetail="isDetail" :list="nowData.dataRel"></ApplyReport>
		</div>

		<el-drawer v-model="drawer" title="选择申请配置信息" size="60%" :lock-scroll="false" :modal="true" append-to-body>
			<el-page-header @back="drawer = !drawer">
				<template #content>
					<span class="text-large font-600 mr-3"> 请点击选择申请配置 </span>
				</template>
			</el-page-header>
			<el-scrollbar height="80vh">
				<el-card v-for="(item, index) in configList" :key="index" class="mt10" @click.native="handleSelectConfig(item)">
					<el-descriptions :title="item.applyConfigName">
						<el-descriptions-item label="申请周期">{{ item.applyCycleLabel }}</el-descriptions-item>
						<el-descriptions-item label="申请时间(日)">{{ item.cycleDate }}</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-scrollbar>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import policyArchive from '@/views/instOperate/components/policyArchive/index.vue'
import ApplyReport from '@/views/instOperate/components/ApplyReport/index.vue'
import MaterialForm from '@/views/instOperate/components/MaterialForm/index.vue'

const props = withDefaults(
	defineProps<{
		model: any
		isDetail?: boolean
	}>(),
	{
		isDetail: false,
	}
)
const loading = ref(false)
const nowData: any = ref({})
const configList = ref([])
const drawer = ref(false)
const activeTag = ref(1)
const navTagList = [
	{ label: '政策文件', value: 1 },
	{ label: '申请表', value: 2 },
	// { label: '申请材料', value: 3 },
	// { label: '数据明细', value: 4 },
]

const handleClick = (item) => {
	activeTag.value = item.value
}

const handleOpenSelect = () => {
	drawer.value = true
	getCofigList()
}
const handleSelectConfig = (item) => {
	drawer.value = false
	nowData.value = item
	props.model.subsidyApplyConfigId = item.id
}

const cycleStr = {
  1:'月',
  2:'季度',
  3:'半年',
  4:'年',
  5:'一次性',
}
const getCofigList = () => {
	apiMod
		.view_ofsSubsidyApplyConfig_list({
			subsidyType: props.model.subsidyType,
		})
		.then((res) => {
			configList.value = res.data.map((item) => {
				return {
					...item,
					applyCycleLabel:cycleStr[item.applyCycle],
				}
			})
		})
}

const getApplyConfigView = () => {
	loading.value = true
	apiMod.view_ofsSubsidyApplyConfig_view(props.model.subsidyApplyConfigId).then((res) => {
		nowData.value = res.data || {}
		loading.value = false
	})
}
watchEffect(() => {
	if (props.model.subsidyApplyConfigId) {
    getApplyConfigView()
  }else {
    nowData.value = props.model
  }
})
</script>

<style scoped lang="scss">
.gap-10 {
	gap: 10px;
}
.config-content {
	padding: 12px;
	margin-top: 20px;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
}
.nav-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 20px;
	text-align: left;
	color: #1c1c28;
	.primary-btn {
		margin-left: 10px;
		border: 1px solid #0052d9;
		color: #0052d9;
		background: #fff;
		border-radius: 4px;
		height: 31px;
		font-size: 14px;
		padding: 6px 16px;
		&:hover {
			cursor: pointer;
		}
	}
	.primary-tag {
		margin-top: 23px;
		margin-bottom: 14px;
		padding: 4px 16px;
		height: 29px;
		border-radius: 6px;
		background: #f57350;
		color: #fff;
		font-size: 16px;
	}
}
.nav-tag-list {
	display: flex;
	flex-flow: row nowrap;
	gap: 10px;
	position: relative;
	z-index: 0;
	margin-top: 14px;
	&:after {
		content: '';
		width: 100%;
		bottom: -10px;
		position: absolute;
		border-bottom: 2px solid #dde6e9;
		z-index: -1;
	}
	.active {
		background: #eef2ff !important;
		color: #000 !important;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			left: 30%;
			bottom: -11px;
			width: 30px;
			height: 5px;
			border-radius: 2.5px;
			background: #0052d9;
		}
	}
	.nav-tag-item {
		padding: 4px 16px;
		height: 27px;
		border-radius: 5px;
		background: #f8f9ff;
		color: #93959b;
		.text {
			font-family: 'Microsoft YaHei';
			font-weight: 400;
			font-size: 14px;
			text-align: left;
		}
		&:hover {
			background: #eef2ff;
			cursor: pointer;
		}
	}
}
</style>
